<template>
  <div class="about" id="main"></div>
  <button @click="update">更新</button>
  <button @click="update2">更新2</button>
</template>

<script>
import { post, get, setItem, getItem, remItem, GetDataTest } from "../../utils/com";
export default {
  setup(props) {
    const myChart_data = [];
    return {
      myChart_data,
    };
  },
  methods: {
    initCharts() {
      this.chart = this.$echarts.init(document.getElementById("main"));
      this.setOptions();
    },
    setOptions(data) {
      console.log(22222, this.chart, data);
      this.chart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: data,
          },
        ],
      });
    },
    update() {
      this.myChart_data = [1, 2, 3, 4, 5, 6];
      this.setOptions(this.myChart_data);
    },
    update2() {
      this.myChart_data = [100, 20, 3, 4000, 50, 600];
      this.setOptions(this.myChart_data);
    },
  },
  mounted() {
    const _this = this;
    this.initCharts();

    var mydata = get("http://127.0.0.1:8000/test").then(function (res) {
      for (var i = 0; i < res.length; i++) {
        var flag = res[i][0];
        _this.myChart_data[_this.myChart_data.length] = flag;
      }
      console.log(Array(_this.myChart_data));

      _this.setOptions(_this.myChart_data);
      return res;
    });
  },
};
</script>

<style scoped>
#main {
  height: 400px;
  width: 100%;
}
</style>
